import { Component, OnInit, ChangeDetectorRef, ViewChild, Inject, forwardRef } from '@angular/core';

import { FloatingWindowEditComponent } from './floating-window-edit/floating-window-edit.component';
import { AppComponent } from '../../../../app.component';

import { path } from '../../../../path.config';
import { masterService } from '../../../../../lib/master.service';
import { saveVarService } from '../../../../../lib/saveVar.service';
import { NzModalService } from 'ng-zorro-antd';
@Component({
    selector: 'floating-window-grid',
    templateUrl: './floating-window-grid.component.html',
    styleUrls: ['./floating-window-grid.component.css'],

})
export class FloatingWindowGridComponent implements OnInit {
    @ViewChild('floatingWindowEdit') public floatingWindowEdit: FloatingWindowEditComponent;

    // api
    // 首页悬浮窗表格数据
    public getList: any = path.pageManagement.floatingWindow.getList;
    // 列表详情
    public getListItem: any = path.pageManagement.floatingWindow.getListItem;
    // 目前启用、禁用
    public isEnabled: any = path.pageManagement.floatingWindow.isEnabled;
    // 删除
    public deleteListItem: any = path.pageManagement.floatingWindow.deleteListItem;
    // 悬浮窗跳转类型
    private getlatformType = path.pageManagement.floatingWindow.getlatformType;

    private redirectingOptions: Array<any> = [];
    // 列表项数组
    public rows: Array<any> = [];
    // 表格数据头部标题
    public columns: Array<any> = [
        { title: '编号' },
        { title: '图片' },
        { title: '描述' },
        { title: '跳转类型' },
        { title: '跳转值' },
        { title: '是否启用' },
        { title: '操作' }
    ];
    // 当前页码
    public page: any = 1;
    // 一共多少页
    public itemsPerPage: number = 10;
    // 分页最多显示的页数
    public maxSize: number = 5;
    // 总页数计数变化时，事件数等于总页数计数
    public numPages: number = 1;
    // 总共的列表项数
    public totalItems: number = 0;
    // 分页器的文本配置
    public localText = {
        firstBtn: '首页',
        lastBtn: '末页',
        previousBtn: '上一页',
        nextBtn: '下一页'
    }

    public filter: any = {
        description: '',
        pageSize: '10',
        pageIndex: '1'
    }

    constructor(public _masterService: masterService,
        public _saveVar: saveVarService,
        public cdRef: ChangeDetectorRef,
        private confirmServ: NzModalService,
        @Inject(forwardRef(() => AppComponent)) public app: AppComponent) { }

    ngOnInit() {
        this._masterService
            .getData(this.getlatformType)
            .subscribe((res) => {
                if (res.statusCode == 200) {
                    this.redirectingOptions = res.data.items;
                    this.cdRef.detectChanges();
                } else {
                    this.app.toastError('错误信息： ' + res.errorMessage);
                }
            });
        this.onChangeTable();
    }

    // 渲染表格
    onChangeTable = (urlObj?, type?) => {
        // 1为筛选
        if (type == 1 && urlObj) {
            this.filter.description = urlObj.description;
        } else if (urlObj) {
            this.filter.pageSize = urlObj.itemsPerPage;
            this.filter.pageIndex = urlObj.page;
        }

        this._masterService
            .getData(this.getList, this.filter)
            .subscribe((res) => {
                if (res.statusCode == 200) {
                    this.rows = res.data.items;
                    this.rows.forEach((row, i) => {
                        row.redirectType = this.redirectingOptions.find(r => r.id == row.redirectType)["name"];
                    })
                    this.totalItems = res.data.pagination.totalCount;
                    this.itemsPerPage = res.data.pagination.pageSize;
                    this.page = parseInt(res.data.pagination.pageIndex);
                    this.cdRef.detectChanges();
                } else if (res.statusCode == 401) {
                    this.app.logOff();
                } else {
                    this.app.toastError('错误信息： ' + res.errorMessage);
                }
            })
    }

    // 打开编辑弹窗
    public openEditModal(rowId) {
        let urlObject = {
            id: rowId
        }
        // 获取列表详情
        this._masterService
            .getData(this.getListItem, urlObject)
            .subscribe((res) => {
                if (res.statusCode == 200) {
                    this.floatingWindowEdit.edit = res.data;
                    this.floatingWindowEdit.editHomepage.show();
                } else if (res.statusCode == 401) {
                    this.app.logOff();
                } else {
                    this.app.toastError('错误信息： ' + res.errorMessage);
                }
            })
    }

    // 目前启用、禁用
    private IsEnable(rowId, rowEnabled) {
        this.confirmServ.confirm({
            nzTitle: '是否确定启用或者禁用？',
            nzOnOk() {
                postIsEnable();
            }
        })

        let postIsEnable = () => {
            let IsEnableObj = {
                id: rowId,
                enabled: 1 - rowEnabled
            }

            this._masterService
                .postData(this.isEnabled, IsEnableObj)
                .subscribe((res) => {
                    if (res.statusCode == 200) {
                        this.onChangeTable();
                    } else if (res.statusCode == 401) {
                        this.app.logOff();
                    } else {
                        this.app.toastError('错误信息： ' + res.errorMessage);
                    }
                })
        }
    }

    private deleteModal(rowId) {
        let deleteItem = () => {
            let deleteObj = {
                id: rowId
            }
            this._masterService
                .getData(this.deleteListItem, deleteObj)
                .subscribe((res) => {
                    if (res.statusCode == 200) {
                        this.onChangeTable();
                    } else if (res.statusCode == 401) {
                        this.app.logOff();
                    } else {
                        this.app.toastError('错误信息： ' + res.errorMessage);
                    }
                })
        }

        this.confirmServ.confirm({
            nzTitle: '是否确定删除该条记录？',
            nzOnOk() {
                deleteItem();
            }
        })
    }
}
